<template>
  <div class="container">
    <div class="header">我的购物车</div>
    <table>
      <thead>
        <tr>
          <th>
            <div>
              <span>选择</span>
            </div>
          </th>
          <th>商品</th>
          <th>价格</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) of cartlist" :key="item.productId">
          <td>
            <van-checkbox v-model="item.checked" checked-color="#ff6700" @change="onChange(item)"></van-checkbox>
          </td>
          <td>
            <img :src="item.productImage" class="image" />
            <span>{{item.productName}}</span>
          </td>
          <td>
            <span>{{item.salePrice}}</span>
          </td>
          <td>
            <van-stepper
              v-model="item.productNum"
              min="1"
              @change="onChange(item)"
            />
          </td>
          <td>{{item.salePrice*item.productNum}}</td>
          <td>
            <van-button type="danger" @click="handleDel(item.productId,index)">删除</van-button>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="bottom">
      <van-checkbox v-model="selectAll" style="float:left" checked-color="#ff6700">全选</van-checkbox>
      <div class="right">
        <span class="sum">
          合计：
          <span style="color:red">￥{{sum}}</span>
        </span>
        <van-button type="danger" :disabled="sum?false:true">提交订单</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { async } from "q";
export default {
  mounted() {
    var { userName } = this.$route.query;
    this.userName = userName;
    this.$http({
      method: "post",
      url: "/users/cartlist",
      data: {
        userName: userName
      }
    }).then(res => {
      this.cartlist = res.data.result;
    });
  },
  data() {
    return {
      cartlist: [],
      userName: ""
    };
  },
  methods: {
    async handleDel(id, index) {
      this.$confirm("此操作将永久删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        var res = await this.$http({
          method: "post",
          url: "/users/delCart",
          data: {
            productId: id
          }
        });
        console.log(res.data.res.ok);
        if (Number(res.data.res.ok) == 1) {
          this.initData();
        }
      });
    },
    initData() {
      this.$http({
        method: "post",
        url: "/users/cartlist",
        data: {
          userName: this.userName
        }
      }).then(res => {
        console.log(res.data.result);
        this.cartlist = res.data.result;
      });
    },
    onChange(item){
      console.log(item.checked);
        this.$http({
            url: "/users/updateCart",
            method: "post",
            data: {
                productId: item.productId,
                checked: item.checked,
                productNum:item.productNum
            }
      });
    }
  },
  computed: {
    selectAll: {
      get() {
        return this.cartlist.every(item => item.checked);
      },
      set(val) {
        this.cartlist.forEach(item => {
          item.checked = val;
        });
      }
    },
    sum() {
      var sum = 0;
      this.cartlist
        .filter(item => item.checked)
        .forEach(item => {
          sum += item.salePrice * item.productNum;
        });
      return sum;
    }
  }
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  font-size: 20px;
  text-align: center;
  height: 50px;
  box-sizing: border-box;
  color: #62707e;
}
table {
  width: 100%;
  border-collapse: collapse;
  thead {
    background: #333333;
    color: #fff;
    height: 50px;
    line-height: 50px;
    font-weight: 500;
    /deep/ .van-checkbox {
      display: inline-block;
    }
  }
  td {
    vertical-align: middle;
    text-align: center;
    /deep/ .van-checkbox {
      padding-left: 20px;
      display: inline-block;
    }
  }
}
.image {
  width: 100px;
}
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  padding-left: 63px;
  background: #fff;
  z-index: 1;
  box-sizing: border-box;
  .right {
    float: right;
    line-height: 50px;
    .sum {
      padding-right: 15px;
    }
  }
}
.container {
  padding-bottom: 50px;
}
</style>